﻿@model TopMenuModel
<ul class="top-menu">
    @await Component.InvokeAsync("Widget", new { widgetZone = "header_menu_before" })
    @if (Model.DisplayHomePageMenuItem)
    {
        <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
    }
    @{
        var rootCategories = Model.Categories.Where(x => x.IncludeInTopMenu).ToList();
    }
    @foreach (var category in rootCategories)
    {
        var categoryLineModel = new TopMenuModel.CategoryLineModel
        {
            Category = category
        };
        @await Html.PartialAsync("_CategoryLine.TopMenu", categoryLineModel)
    }
    @foreach (var topic in Model.Topics)
    {
        <li><a href="@Url.RouteUrl("Topic", new { SeName = topic.SeName })">@topic.Name</a></li>
    }
    @if (Model.NewProductsEnabled && Model.DisplayNewProductsMenuItem)
    {
        <li><a href="@Url.RouteUrl("NewProducts")">@T("Products.NewProducts")</a></li>
    }
    @if (Model.DisplayProductSearchMenuItem)
    {
        <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a></li>
    }
    @if (Model.DisplayCustomerInfoMenuItem)
    {
        <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
    }
    @if (Model.BlogEnabled && Model.DisplayBlogMenuItem)
    {
        <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
    }
    @if (Model.ForumEnabled && Model.DisplayForumsMenuItem)
    {
        <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
    }
    @if (Model.DisplayContactUsMenuItem)
    {
        <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
    }
    @await Component.InvokeAsync("Widget", new { widgetZone = "header_menu_after" })
</ul>
@{
    var rootCategoriesResponsive = Model.Categories.ToList();
    //name it "Categories" if we have only categories. Otherwise, "Menu"
    var responsiveMenuTitle = Model.HasOnlyCategories ? T("Categories") : T("Menu");
    <div class="menu-toggle">@responsiveMenuTitle</div>
    <ul class="top-menu mobile">
        @await Component.InvokeAsync("Widget", new { widgetZone = "mob_header_menu_before" })
        @if (Model.DisplayHomePageMenuItem)
        {
            <li><a href="@Url.RouteUrl("HomePage")">@T("HomePage")</a></li>
        }
        @foreach (var category in rootCategoriesResponsive)
        {
            var categoryLineModel = new TopMenuModel.CategoryLineModel
            {
                Category = category,
                ResponsiveMobileMenu = true
            };
            @await Html.PartialAsync("_CategoryLine.TopMenu", categoryLineModel)
        }
        @foreach (var topic in Model.Topics)
        {
            <li><a href="@Url.RouteUrl("Topic", new { SeName = topic.SeName })">@topic.Name</a></li>
        }
        @if (Model.NewProductsEnabled && Model.DisplayNewProductsMenuItem)
        {
            <li><a href="@Url.RouteUrl("NewProducts")">@T("Products.NewProducts")</a></li>
        }
        @if (Model.DisplayProductSearchMenuItem)
        {
            <li><a href="@Url.RouteUrl("ProductSearch")">@T("Search")</a></li>
        }
        @if (Model.DisplayCustomerInfoMenuItem)
        {
            <li><a href="@Url.RouteUrl("CustomerInfo")">@T("Account.MyAccount")</a></li>
        }
        @if (Model.BlogEnabled && Model.DisplayBlogMenuItem)
        {
            <li><a href="@Url.RouteUrl("Blog")">@T("Blog")</a></li>
        }
        @if (Model.ForumEnabled && Model.DisplayForumsMenuItem)
        {
            <li><a href="@Url.RouteUrl("Boards")">@T("Forum.Forums")</a></li>
        }
        @if (Model.DisplayContactUsMenuItem)
        {
            <li><a href="@Url.RouteUrl("ContactUs")">@T("ContactUs")</a></li>
        }
        @await Component.InvokeAsync("Widget", new { widgetZone = "mob_header_menu_after" })
    </ul>
    <script type="text/javascript" asp-location="Footer">
        $(document).ready(function () {
            $('.menu-toggle').click(function () {
                $(this).siblings('.top-menu.mobile').slideToggle('slow');
            });
            $('.top-menu.mobile .sublist-toggle').click(function () {
                $(this).siblings('.sublist').slideToggle('slow');
            });
        });
    </script>
}